<template>

    <div class="container">
        <div>
            <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
                <span style="margin-right: 20px; font-weight: bold;">闭环管理</span>
                <span style="margin-right: 20px;">|</span>
                <span style="display: flex; align-items: center;">
                    <span>降水短临回执（地灾）</span>
                </span>
            </div>

        </div>
        <div class="title">
            <span>预警产品列表</span>
        </div>
        <div class="selection">
            <el-date-picker v-model="startTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd"
                style="width:200px" class="custom-select">
            </el-date-picker>
            <span style="font-size: 16px;color: white;margin: 0 10px">至</span>
            <el-date-picker v-model="endTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd"
                style="width:200px" class="custom-select">
            </el-date-picker>

            <el-select v-model="countyName" placeholder="地区" class="custom-select" style="width: 150px;margin: 0 5px">
                <el-option v-for="item in countyOptions" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" @click="filterData">确定</el-button>


        </div>
        <div class="table">

            <el-table stripe ref="filterTable" :data="tableData" v-loading="loading"
                :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle"
                @cell-mouse-enter="getProductId" max-height="750px">

                <el-table-column label="确认情况" min-width="5%" min-height="5%" align="center">
                    <span @click="gotoDetail" class="gotoDetail" style="cursor: pointer;color:#409eff">详情</span>
                </el-table-column>
                <el-table-column prop="productTime" label="发布时间" min-width="10%" min-height="5%" align="center"
                    sortable>
                </el-table-column>
                <el-table-column prop="productNumber" label="期数" min-width="5%" min-height="5%" align="center" sortable>
                </el-table-column>
                <el-table-column prop="productType" label="类别" min-width="5%" min-height="5%" align="center" sortable>
                </el-table-column>
                <el-table-column prop="productArea" label="区域" min-width="5%" min-height="5%" align="center" sortable>
                </el-table-column>
                <el-table-column prop="productUnit" label="发布单位" min-width="10%" min-height="5%" align="center">
                </el-table-column>
                <el-table-column prop="productContent" label="内容" min-width="50%" min-height="5%" align="center">
                </el-table-column>
                <el-table-column prop="itt" label="入库时间" min-width="10%" min-height="5%" align="center" sortable>
                </el-table-column>

            </el-table>
        </div>
        <!-- <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total" background
                class="custom-pagination">
            </el-pagination>
        </div> -->
    </div>



</template>

<script>
import Cookies from 'js-cookie';
// 引入闭环管理相关接口
import { reqReceipt } from '@/api/closed_loop/index.js'
// 处理时间格式
import moment from 'moment';

export default {
    name: "rainfall_disasters",
    data() {
        return {
            date: '',
            selectedCity: '',
            selectedCounty: '',
            selectedTownship: '',
            search: '',
            currentPage: 1,
            pageSize: 10,
            total: 57,
            loading: false,
            // 表格数据
            tableData: [
                {
                    productTime: '',//发布时间
                    productNumber: '',//期数
                    productType: '',//类别
                    productArea: '',//区域
                    productUnit: '',//发布单位
                    productContent: '',//内容
                    itt: '',//入库时间
                    mark: ''//展示标识-正式、测试，如果是测试则不展示。
                }],

            type: '降水短临',
            //开始时间
            startTime: moment(new Date()).subtract(1, 'years').format('YYYY-MM-DD'),
            // 结束时间
            endTime: moment(new Date()).format('YYYY-MM-DD'),
            // 地区
            countyName: Cookies.get('county'),
            // 地区选项
            countyOptions: Cookies.get('county') === '雅安' ? [
                {
                    value: '雅安',
                },
                {
                    value: '雨城'
                },
                {
                    value: '经开'
                },
                {
                    value: '名山'
                },
                {
                    value: '天全'
                },
                {
                    value: '芦山'
                },
                {
                    value: '宝兴'
                },
                {
                    value: '荥经'
                },
                {
                    value: '汉源'
                }, {
                    value: '石棉'
                },] : [{ value: Cookies.get('county') }],
            //选中的产品
            selectProduct: {}


        }
    },
    mounted() {
        this.getReceiptData()
    },

    methods: {
        // 表格样式
        headerCellStyle() {
            return {
                background: '#0c2340',
                color: '#fff',
            };
        },
        cellStyle() {
            return {
                background: '#05152e',
                color: '#fff',
            };
        },
        rowStyle() {
            return {
                height: '30px',
            };
        },
        //  回执表格数据请求
        async getReceiptData() {
            this.loading = true
            let result = await reqReceipt(this.startTime, this.endTime, this.countyName, this.type)
            // 过滤掉测试数据
            let solvedData = result.data.data.filter((item) => {
                return item.mark === '正式'
            })
            this.tableData = solvedData
            this.loading = false


        },
        // 筛选数据
        filterData() {
            this.getReceiptData(this.startTime, this.endTime, this.countyName, this.type)
        },
        // 切换
        change() {
            this.getReceiptData(this.startTime, this.endTime, this.countyName, this.type)
        },
        // 获取某一行产品id
        getProductId(item) {
            this.selectProduct = item
        },
        //跳转详细页面
        gotoDetail() {
            const item = this.selectProduct
            this.$router.push(
                {
                    path: 'receipt_detail',
                    query: {
                        title: '降水短临回执（地灾）',
                        type: '地灾降水短临',
                        productId: item.productId,
                        productTime: item.productTime,
                        productUnit: item.productUnit,
                        productArea: item.productArea,
                        productNumber: item.productNumber,
                        productContent: item.productContent
                    }
                })
        }

    }
}
</script>

<style scoped lang="scss">
.custom-select .el-input__inner,
.el-date-picker .el-input__inner {
    background-color: rgb(36, 54, 101) !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
}

::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);

    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }


}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.container {
    width: 100%;


    .title {
        width: 100%;
        display: grid;
        place-items: center;
        color: white;
        font-weight: bold;
    }

    .selection {
        width: 100%;
        margin-bottom: 20px;
    }

    .table {
        width: 100%;

    }

    .pagination {
        width: 100%;
        margin-top: 10px;
    }
}
</style>